Link naar een bladwijzer

navigeren binnen dezelfde pagina

Om naar een locatie in dezelfde pagina te verwijzen moet je eerste een 'bladwijzer' maken, namelijk een plaats markeren door aan het omsluitende html element een id attribuut toe te voegen. Zo'n markering ziet er als volgt uit:

<h2 id="inhoud"></h2>

In dit voorbeeld heeft de markering de naam "inhoud".

Als je binnen een document een link naar een bladwijzer wilt maken, gebruik je als URI een hekje (#) gevolgd door de waarde van het id attribuut van de bladwijzer. Een link naar de markering in het voorbeeld hiervoor ziet er als volgt uit:

<a href="#inhoud">Inhoud Hyperlinks</a>

De link wordt door de browser weergegeven als: Inhoud Hyperlinks. Volg je deze link, dan kom je bij de inhoud van het onderdeel Hyperlinks bovenaan deze pagina.

Voorbeeld

We proberen het uit in onze Marsman bloemlezing.

1. Bovenaan de pagina voegen we de titels van de gedichten toe. We maken er hyperlinks van die naar het desbetreffende gedicht springen als je erop klikt.
2. Vervolgens voegen we aan elke titel van een gedicht een id attribuut toe zodat de browser weet waarnaar toe er gesprongen moet worden.
3. Elke titel krijgt zijn eigen id en we beginnen met het eerste gedicht.
4. En dat doen we voor alle gedichten.

Naar een bladwijzer op een andere pagina

Het is ook mogelijk te verwijzen naar een gemarkeerde plaats in een ander document, in dezelfde of een andere folder, of op een andere server. Als waarde van het href attribuut neem je de verwijzing naar het betreffende document op en zet daar het hekje en de naam van de markering achter. In het volgende voorbeeld verwijst de link naar het document "multimedia.html", dat zich in een hoger gelegen folder bevindt. De plaats van bestemming binnen dat document is aangegeven met een markering die de naam "hyperlinks" heeft.

<a href="../multimedia.html#inhoud">Inhoud Multimedia</a>

De link wordt door de browser weergegeven als: Inhoud Multimedia.

Linken naar een plaats binnen een document zorgt ervoor dat de gebruiker niet het hele document hoeft door te scrollen, maar direct naar de gewenste informatie kan springen.

Het attribuut name is geldig in HTML maar in XHTML gebruiken we het attribuut id.